<template>
  <view class="w100p common_wrap no-bg">
    <CommonHeader :title="$t('供应商名片')"></CommonHeader>

    <view class="w100p pr list_block">
      <scroll-view scroll-y>
        <!-- 标题 -->
        <view class="box-same upload-wrapper">
          <view class="inp-li">
            <view class="title">{{$t('公司名称')}}<text>*</text></view>
            <view class="inp">
              <input type="text" :placeholder="$t('请输入公司名称')" placeholder-class="input-placeholder-cai"
                v-model="paramsSubmit.username" maxlength="80" />
            </view>
          </view>
          <view class="inp-li">
            <view class="title">{{$t('店铺简介')}}<text>*</text></view>
            <view class="inp">
              <input type="text" :placeholder="$t('请输入店铺简介')" placeholder-class="input-placeholder-cai"
                v-model="paramsSubmit.profile" maxlength="180" />
            </view>
          </view>
          <view class="upload-li">
            <view class="title">{{$t('店铺')}}logo<text class="require">*</text><text class="yaoqiu">{{$t('支持')}}jpeg、jpg、png (大小3m内)</text>
            </view>
            <view class="uploads">
              <view class="img" v-for="(item, index) in avatarList" :key="index" @click="onPreview(item.fullurl)">
                <image :src="item.fullurl" mode="aspectFill" />
                <view class="delete" @click.stop="onDelete(index, 'avatarList')">
                  <view class="lien"></view>
                </view>
              </view>
              <view class="img" v-if="avatarList.length < 1"
                @click="onUpload({ type: 'image', size: 3, count: 1 }, 'avatar')">
                <image src="/static/caigou/camera.png" />
              </view>
            </view>
          </view>
          <view class="upload-li">
            <view class="title">{{$t('店铺头图')}}<text class="require">*</text><text class="yaoqiu">{{$t('支持')}}jpeg、jpg、png (大小3m内)</text>
            </view>
            <view class="uploads">
              <view class="img" v-for="(item, index) in bgImgList" :key="index" @click="onPreview(item.fullurl)">
                <image :src="item.fullurl" mode="aspectFill" />
                <view class="delete" @click.stop="onDelete(index, 'bgImgList')">
                  <view class="lien"></view>
                </view>
              </view>
              <view class="img" v-if="bgImgList.length < 1"
                @click="onUpload({ type: 'image', size: 3, count: 1 }, 'bg_img')">
                <image src="/static/caigou/camera.png" />
              </view>
            </view>
          </view>
        </view>

        <view class="box-same">
          <view class="inp-li">
            <view class="title">{{$t('发货地址')}}<text>*</text></view>

            <view class="inp">
              <input type="text" :placeholder="$t('请输入发货地址')" placeholder-class="input-placeholder-cai"
                v-model="paramsSubmit.address" maxlength="180" />
            </view>
          </view>
          <view class="inp-li">
            <view class="title">{{$t('公司地址')}}<text>*</text></view>

            <view class="inp">
              <input type="text" :placeholder="$t('请输入公司地址')" placeholder-class="input-placeholder-cai"
                v-model="paramsSubmit.company_address" maxlength="180" />
            </view>
          </view>
        </view>
     
        <!-- 图片上传 -->
        <view class="box-same upload-wrapper">
          <view class="upload-li">
            <view class="title">{{$t('公司照片')}}<text class="require">*</text><text class="yaoqiu">{{$t('支持')}}jpeg、jpg、png (大小3m内)</text>
            </view>
            <view class="uploads">
              <view class="img" v-for="(item, index) in imgList" :key="index" @click="onPreview(item.fullurl)">
                <image :src="item.fullurl" mode="aspectFill" />
                <view class="delete" @click.stop="onDelete(index, 'imgList')">
                  <view class="lien"></view>
                </view>
              </view>
              <view class="img" @click="onUpload({ type: 'image', size: 3, count: 6 }, 'shop_image')"
                v-if="imgList.length < 6">
                <image src="/static/caigou/camera.png" />
              </view>
            </view>
          </view>
          <view class="upload-li">
            <view class="title">{{$t('上传视频')}}<text class="require">*</text><text class="yaoqiu">{{$t('支持')}}mp4、rmvb、AVI (大小50m内)</text></view>
            <view class="uploads">
              <view class="img zhan" v-for="(item, index) in videoList" :key="index"
                @click="onPreviewVideo(item.fullurl)">
                <image src="" mode="aspectFill" style="background-color: azure;" />
                <image src="/static/icon/play.png" mode="aspectFill" class="paly"></image>
                <view class="delete" @click.stop="onDelete(index, 'videoList')">
                  <view class="lien"></view>
                </view>
              </view>
              <view class="img" @click="onUpload({ type: 'video', size: 50, count: 1 })" v-if="videoList.length < 1">
                <image src="/static/caigou/videox.png" />
              </view>
            </view>
          </view>
        </view>

        <view class="box-same upload-wrapper">
          <!-- <view class="inp-li">
            <view class="title">{{$t('入驻时间')}}<text>*</text></view>
            <view class="inp">
              <input type="text" :placeholder="$t('请输入入驻时间')" placeholder-class="input-placeholder-cai"
                v-model="paramsSubmit.createTime" />
            </view>
          </view> -->
          <view class="inp-li">
            <view class="title">{{$t('占地面积')}}<text>*</text></view>
            <view class="inp">
              <input type="text" :placeholder="$t('请输入占地面积')" placeholder-class="input-placeholder-cai"
                v-model="paramsSubmit.square" maxlength="20" />
            </view>
          </view>
          <view class="inp-li">
            <view class="title">{{$t('主营')}}<text>*</text></view>
            <view class="inp">
              <input type="text" :placeholder="$t('请输入主营')" placeholder-class="input-placeholder-cai"
                v-model="paramsSubmit.main_product" maxlength="180" />
            </view>
          </view>

          <view class="inp-li">
            <view class="title">{{$t('在职员工')}}<text>*</text></view>
            <view class="inp">
              <input type="text" :placeholder="$t('请输入在职员工')" placeholder-class="input-placeholder-cai"
                v-model="paramsSubmit.employee" maxlength="20" />
            </view>
          </view>
          <view class="inp-li">
            <view class="title">{{$t('负责人')}}<text>*</text></view>
            <view class="inp">
              <input type="text" :placeholder="$t('请输入负责人')" placeholder-class="input-placeholder-cai"
                v-model="paramsSubmit.employee_boss" maxlength="80" />
            </view>
          </view>
          <view class="inp-li">
            <view class="title">{{$t('负责人电话')}}<text>*</text></view>
            <view class="inp">
              <input type="text" :placeholder="$t('请输入负责人电话')" placeholder-class="input-placeholder-cai"
                v-model="paramsSubmit.fzr_tel" maxlength="80" />
            </view>
          </view>
          <view class="upload-li ">
            <view class="title">{{$t('营业执照')}}<text class="require">*</text><text class="yaoqiu">{{$t('支持')}}jpeg、jpg、png (大小3m内)</text>
            </view>
            <view class="uploads">
              <view class="img" v-for="(item, index) in licensList" :key="index" @click="onPreview(item.fullurl)">
                <image :src="item.fullurl" mode="aspectFill" />
                <view class="delete" @click.stop="onDelete(index, 'licensList')">
                  <view class="lien"></view>
                </view>
              </view>
              <view class="img" @click="onUpload({ type: 'image', size: 3, count: 4 }, 'license_image')"
                v-if="licensList.length < 4">
                <image src="/static/caigou/camera.png" />
              </view>
            </view>
          </view>
          <view class="upload-li ">
            <view class="title">{{$t('生产许可')}}<text class="require">*</text><text class="yaoqiu">{{$t('支持')}}jpeg、jpg、png (大小3m内)</text>
            </view>
            <view class="uploads">
              <view class="img" v-for="(item, index) in productListLicence" :key="index"
                @click="onPreview(item.fullurl)">
                <image :src="item.fullurl" mode="aspectFill" />
                <view class="delete" @click.stop="onDelete(index, 'productListLicence')">
                  <view class="lien"></view>
                </view>
              </view>
              <view class="img" @click="onUpload({ type: 'image', size: 3, count: 6 }, 'license_images')"
                v-if="productListLicence.length < 4">
                <image src="/static/caigou/camera.png" />
              </view>
            </view>
          </view>

        </view>

        <!-- 银行信息 -->
        <view class="box-same upload-wrapper">
          <view class="inp-li">
            <view class="title">{{$t('汇款账户')}}<text>*</text></view>
            <view class="switch-w">
              <u-radio-group
                v-model="paramsSubmit.isPlatformAccount"
                size="30"
                iconSize="20rpx"
                labelSize="30rpx"
              >
                <u-radio
                  :customStyle="{marginRight: '30rpx'}"
                  v-for="(item, index) in radiolist1"
                  :key="index"
                  :label="item.name"
                  :name="item.value"
                   labelSize="24rpx"
                >
                </u-radio>
              </u-radio-group>
            </view>
           
          </view>
          <template v-if="paramsSubmit.isPlatformAccount == 2">
            <view class="inp-li">
              <view class="title">{{$t('收款人')}}<text>*</text></view>
              <view class="inp">
                <input type="text" :placeholder="$t('请输入收款人')" placeholder-class="input-placeholder-cai"
                  v-model="paramsSubmit.skr_name" maxlength="80" />
              </view>
            </view>
            <view class="inp-li">
              <view class="title">{{$t('开户行名称')}}<text>*</text></view>
              <view class="inp">
                <input type="text" :placeholder="$t('请输入开户行名称')" placeholder-class="input-placeholder-cai"
                  v-model="paramsSubmit.card_name" maxlength="80" />
              </view>
            </view>
            <view class="inp-li">
              <view class="title">{{$t('银行卡号')}}<text>*</text></view>
              <view class="inp">
                <input type="text" :placeholder="$t('请输入银行卡号')" placeholder-class="input-placeholder-cai"
                  v-model="paramsSubmit.cardnum" maxlength="80" />
              </view>
            </view>
          </template>
         
          
        
        </view>
        
        <view style="height: 16rpx;"></view>
      </scroll-view>
    </view>

    <!-- 取消 -->
    <view class="btn-wrap">
      <view class="btn green" @click="submit">{{$t('确定提交')}}</view>
    </view>

		<view style="height: 50rpx"></view>






    <!-- 播放视频 -->
    <uni-popup ref="popupVideo" type="center" background-color="#000" mask-background-color="#000" class="popvexxx">
      <view class="wrapper-video">
        <video :src="previewVideoUrl" :show-center-play-btn="true" object-fit="cover" play-btn-position="center"
          :controls="true" :autoplay="true" class="video-main">
        </video>
      </view>
    </uni-popup>

  </view>
</template>


<script>
import { newProfile, getActionSheetList, getUserHomepage } from '@/api/app.js';


import { uploadFile, chooseFile } from '@/utils/tool.js';


import CommonHeader from "@/pages/translate/components/common-header.vue";
export default {
  components: {
    CommonHeader
  },
  data() {
    return {
      // 参数提交
      paramsSubmit: {
        user_id: uni.getStorageSync('user_id'),
        username: '', // 公司名称
        main_product: '', // 主营
        company_address: '', // 公司地址
        address: '', // 发货地址
        video: '',// 公司视频
        shop_image: '', // 店铺照片
        profile: '', // 店铺简介
        createTime: '', // 店铺入驻时间
        square: '', // 占地面积
        license_image: '', // 营业执照
        employee: '', // 在职员工
        employee_boss: '', // 负责人
        fzr_tel: '', // 负责人电话
        avatar: '', // 店铺logo
        bg_img: '', // 店铺头图
        license_images: '', // 生产许可
        identity_id: '',
        // 开户行名称
        card_name: '',
        // 银行卡号
        cardnum: '',
        // 收款人
        skr_name: '',
        isPlatformAccount: 1,
      },
      videoList: [], // 视频

      avatarList: [], // 公司logo
      bgImgList: [], // 头图
      
      licensList: [], // 营业执照
      imgList: [], // 公司照片
      productListLicence: [], // 生产许可
      previewVideoUrl: '', // 视频预览
      radiolist1: [{
        name: this.$t('平台账号'),
        value: 1,
      },
      {
        name: this.$t('商家账号'),
        value: 2,
      }],

    }
  },
  onLoad(options) {
    this.is_renzheng = options.is_renzheng
    this.paramsSubmit.identity_id = options.identity_id;
    this.getDetail();

    // window.onNativeShow = ()=>{
    //  window.xxxxxx('onNativeShowonNativeShowonNativeShow')
    // }

    // window.onNativeHide = ()=>{
    //   window.xxxxxx('onNativeHideonNativeHideonNativeHide')
    // }

 

  },
  methods: {
    onCHangeHotArea(e) {
      this.fullBeginAddressKeyArea = e.column3.value;
      this.fullBeginAddressArea = e.column3.label;
      this.paramsSubmit.city_id = e.column3.value;
    },

    // 数据回填
    getDetail() {
      getUserHomepage({
        user_id: uni.getStorageSync('user_id')
      }).then((res) => {
        let info = res.data.data.userInfo;

        // 合并匹配字段
        this.paramsSubmit.username = info.username;
        this.paramsSubmit.main_product = info.main_product;
        this.paramsSubmit.company_address = info.company_address; // 公司地址
        this.paramsSubmit.address = info.address; // 发货地址
        this.paramsSubmit.profile = info.profile;
        this.paramsSubmit.createTime = info.createTime;
        this.paramsSubmit.square = info.square;
        this.paramsSubmit.employee = info.employee;
        this.paramsSubmit.employee_boss = info.employee_boss;
        this.paramsSubmit.fzr_tel = info.fzr_tel;
        this.paramsSubmit.skr_name = info.skr_name;
        this.paramsSubmit.card_name = info.card_name;
        this.paramsSubmit.cardnum = info.cardnum; 
        this.paramsSubmit.isPlatformAccount = +info.isPlatformAccount || 0;
        // 头像
        if (info.avatar) {
          this.paramsSubmit.avatar = this.getImageUrl(info.avatar);
          this.avatarList = [{
            url: this.getImageUrl(info.avatar),
            fullurl: this.getImageUrl(info.avatar),
          }]
        }

        // 店铺头图
        if (info.bg_img) {
          this.paramsSubmit.bg_img = this.getImageUrl(info.bg_img);
          this.bgImgList = [{
            url: this.getImageUrl(info.bg_img), 
            fullurl: this.getImageUrl(info.bg_img),
          }]
        }

        if (info.audit_video) {
          this.paramsSubmit.video = this.getImageUrl(info.audit_video);
          this.videoList = [{
            url: this.getImageUrl(info.audit_video),
            fullurl: this.getImageUrl(info.audit_video),
          }]
        }

        // 公司照片
        let arrImg = [];
        let arrPic = [];
        info.shop_image.forEach((ele) => {
          arrImg.push({
            url: this.getImageUrl(ele),
            fullurl: this.getImageUrl(ele),
          })
          arrPic.push(this.getImageUrl(ele))
        })

        this.imgList = arrImg;
        this.paramsSubmit.shop_image = arrPic.join(',')

        // 营业执照
        let licenImg = [];
        let arrLicence = [];
        info.license_image2.forEach((ele) => {
          licenImg.push({
            url:  this.getImageUrl(ele),
            fullurl: this.getImageUrl(ele),
          })
          arrLicence.push(this.getImageUrl(ele))
        })

        this.licensList = licenImg;
        this.paramsSubmit.license_image = arrLicence.join(',')

        // 生产许可
        let licenImgs = [];
        let arrLicences = [];
        if (info.license_images) {
          let imgs = info.license_images.split(',')
          imgs.forEach((ele) => {
            licenImgs.push({
              url: this.getImageUrl(ele),
              fullurl: this.getImageUrl(ele),
            })
            arrLicences.push(this.getImageUrl(ele))
          })

          this.productListLicence = licenImgs;
          this.paramsSubmit.license_images = arrLicences.join(',')
        }



        // // 视频

        if (info.user_audit.video) {
          let arrVideo = [];
          let arrMp = [];
          [info.user_audit.video].forEach((ele) => {
            arrVideo.push({
              url: this.getImageUrl(ele),
              fullurl: this.getImageUrl(ele),
            })
            arrMp.push(this.getImageUrl(ele))
          })
          this.videoList = arrVideo;
          this.paramsSubmit.video = arrMp.join(',');

        }

      })
    },
    // 预览视频
    onPreviewVideo(url) {
      this.previewVideoUrl = url;
      this.$nextTick(() => {
        this.$refs.popupVideo.open()
      })
    },
    // 删除图片
    onDelete(index, arr) {
      this[arr].splice(index, 1)
      this.$forceUpdate();
    },
    // 上传视频和图片
    async onUpload({ type, size, count }, keyx) {
      let res = await uploadFile(await chooseFile({
        type,
        size,
        count,
      }))
      if (type == 'image') {
        switch (keyx) {
          case 'avatar':
            this.avatarList = [res];
            break;
          case 'bg_img':
            this.bgImgList = [res];
            break;
          case 'license_image':
            this.licensList.push(res);
            break;
          case 'license_images':
            this.productListLicence.push(res);
            break;
          case 'shop_image':
            this.imgList.push(res);
            break;

        }
      }
      if (type == 'video') {
        this.videoList = [res];
      }

    },
    onPreview(current) {
      uni.previewImage({
        current,
        urls: [current]
      })
    },



    async submit() {
      if (!this.paramsSubmit.username) {
        uni.showToast({
          title: this.$t('请输入公司名称'),
          icon: 'none',
        })
        return;
      }

      if (!this.paramsSubmit.profile) {
        uni.showToast({
          title: this.$t('请输入店铺简介'),
          icon: 'none',
        })
        return;
      }


        if (!this.avatarList.length) {
          uni.showToast({
            title: '请上传店铺logo',
            icon: 'none',
          })
          return;
        }

      if (!this.bgImgList.length) {
        uni.showToast({
          title: this.$t('请上传店铺头图'),
          icon: 'none',
        })
        return;
      }
      if (!this.paramsSubmit.address) {
        uni.showToast({
          title: this.$t('请输入发货地址'),
          icon: 'none',
        })
        return;
      }
      if (!this.paramsSubmit.company_address) {
        uni.showToast({
          title: this.$t('请输入公司地址'),
          icon: 'none',
        })
        return;
      }
      if (!this.imgList.length) {
        uni.showToast({
          title: this.$t('请选择公司照片'),
          icon: 'none',
        })
        return;
      }

      if (!this.videoList.length) {
        uni.showToast({
          title: this.$t('请上传视频'),
          icon: 'none',
        })
        return;
      }

      if (!this.paramsSubmit.square) {
        uni.showToast({
          title: this.$t('请输入占地面积'),
          icon: 'none',
        })
        return;
      }

      if (!this.paramsSubmit.main_product) {
        uni.showToast({
          title: this.$t('请输入主营'),
          icon: 'none',
        })
        return;
      }


      if (!this.paramsSubmit.employee) {
        uni.showToast({
          title: this.$t('请输入在职员工'),
          icon: 'none',
        })
        return;
      }

      if (!this.paramsSubmit.employee_boss) {
        uni.showToast({
          title: this.$t('请输入负责人'),
          icon: 'none',
        })
        return;
      }
      if (!this.paramsSubmit.fzr_tel) {
        uni.showToast({
          title: this.$t('请输入负责人电话'),
          icon: 'none',
        })
        return;
      }
      if (!this.licensList.length) {
        uni.showToast({
          title: this.$t('请上传营业执照'),
          icon: 'none',
        })
        return;
      }

      if (!this.productListLicence.length) {
        uni.showToast({
          title: this.$t('请上传生产许可'),
          icon: 'none',
        })
        return;
      }

      if (this.paramsSubmit.isPlatformAccount == 2) {
        if (!this.paramsSubmit.skr_name) {
          uni.showToast({
            title: this.$t('请输入收款人'),
          icon: 'none',
        })
          return;
        }
        if (!this.paramsSubmit.card_name) {
          uni.showToast({
            title: this.$t('请输入开户行名称'),
            icon: 'none',
          })
          return;
        }
        if (!this.paramsSubmit.cardnum) {
          uni.showToast({
            title: this.$t('请输入银行卡号'),
            icon: 'none',
          })
          return;
        }
      }


      // 公司logo
      let avatarImg = [];
      this.avatarList.forEach((ele) => {
        avatarImg.push(ele.fullurl)
      })

      // 店铺头图
      let bgImg = [];
      this.bgImgList.forEach((ele) => {
        bgImg.push(ele.fullurl)
      })

      // 营业执照
      let liceImg = [];
      this.licensList.forEach((ele) => {
        liceImg.push(ele.fullurl)
      })

      // 生产许可
      let liceImgs = [];
      this.productListLicence.forEach((ele) => {
        liceImgs.push(ele.fullurl)
      })

      // 公司照片 
      let companyImg = [];
      this.imgList.forEach((ele) => {
        companyImg.push(ele.fullurl)
      })

      // 公司视频
      let arrVideo = [];
      this.videoList.forEach((ele) => {
        arrVideo.push(ele.fullurl)
      })
    

      uni.showLoading({ title: 'loading...', mask: true, })

      try {
        let res = await newProfile({
          ...this.paramsSubmit,
          avatar: avatarImg.join(','),
          audit_video: arrVideo.join(','),
          license_image: liceImg.join(','),
          license_images: liceImgs.join(','),
          shop_image: companyImg.join(','),
          bg_img: bgImg.join(','),
        })
        if (res.data.code == 1) {
          this.isMessageGo({
						action: 'upDateUser',
						data: {
							name: this.paramsSubmit.username,
							avatar: this.getImageUrl(avatarImg.join(','))
						}
					})
          uni.showToast({
            title: this.$t('提交成功'),
          })
          setTimeout(() => {
            uni.hideLoading({})
            uni.navigateBack({})
          }, 700);
        } else {
          uni.showToast({
            title: res.data.message ||res.data.msg,
            icon: 'none'
          })
          uni.hideLoading({})

        }

      } catch (error) {
       
        uni.hideLoading({})
      }



    }
  },
}

</script>



<style lang="scss" scoped>
@import '@/pages/translate/common/common.scss';
@import './index.scss';
</style>


<style>
.input-placeholder-cai {
  color: #606366;
  font-size: 26rpx;
}
</style>